type Columns<T> = {
    [K in keyof Required<T>]: ColumnDef<T, T[K]>;
}[keyof Required<T>][];
type ColumnsBuilder<T> = (helper: ColumnHelper<T>) => Columns<T>;

interface Props<T> {
  data: T[] | null;
  columns: ColumnsBuilder<T>;
};

type Person = {
    id: number;
    firstName: string;
    lastName: string;
    age?: number;
    visits: number;
    status: string;
};

// (ColumnDef<Person, number> | ColumnDef<Person, string> | ColumnDef<Person, number | undefined>)[]
type ColumnsType = Columns<Person>;

const columns: ColumnsBuilder<Person> = (columnHelper) => [
    // Inferred as: <(p: Person) => string>(accessor: (p: Person) => string, column: DisplayColumnDef<Person, string>) => AccessorFnColumnDef<Person, string>
    columnHelper.accessor((p) => p.firstName, {
        header: 'First Name',
        cell: (info) => <strong>{info.getValue()}</strong>,
    }),
    // inferred as: <"age">(accessor: "age", column: IdentifiedColumnDef<Person, number | undefined>) => AccessorKeyColumnDef<Person, number | undefined>
    columnHelper.accessor('age', {
        header: 'Last Name',
        cell: (info) => <em>{info.getValue()}</em>,
    }),
    // inferred as: <"status">(accessor: "status", column: IdentifiedColumnDef<Person, string>) => AccessorKeyColumnDef<Person, string>
    columnHelper.accessor('status', {
        header: 'Status',
        cell: (info) => (
            <span
                style={{
                    color: info.getValue() === 'Active' ? 'green' : 'red',
                    fontWeight: 'bold',
                }}
            >
                {info.getValue()}
            </span>
        ),
    }),
],